<template>
    <div id="app">
        <div class="box">
            <div style="margin-bottom: 0px">

                <el-row>
                    <el-col :span="12" v-if="$PowerAdd(userPower, currentPagePower)">
                        <el-button type="success" v-on:click="onAdd">新增一级菜单</el-button>
                    </el-col>
                    <el-col :span="12" v-else>
                        &nbsp;
                    </el-col>

                    <el-col :span="12" style="text-align:right;"
                        v-if="$PowerSelect(userPower, currentPagePower)">
                        <el-button type="primary" class="l-margin-l15" v-on:click="getList">刷新</el-button>
                    </el-col>
                    <el-col :span="12" style="text-align:right;" v-else>
                        &nbsp;
                    </el-col>

                </el-row>



            </div>
        </div>
        <div class="box">
            <el-table :data="list" :height="`calc(100vh - 225px)`" border style="width: 100%" :highlight-current-row="true">

                <el-table-column label="菜单名称" align="left">
                    <template slot-scope="scope">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <template v-if="scope.row.level == 2">
                            &nbsp;&nbsp;&nbsp;&nbsp;| {{ scope.row.menuName }}
                        </template>
                        <template v-else>
                            <i class="el-icon-menu"></i>&nbsp;&nbsp;{{ scope.row.menuName }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="code【慎重改】" align="center" width="460">
                    <template slot-scope="scope">
                        <div class="l-grren">{{ scope.row.code }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="菜单链接" align="center">
                    <template slot-scope="scope">
                        <div class="l-gray">{{ scope.row.linkUrl }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="菜单等级" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.level }}
                    </template>
                </el-table-column> -->
                <el-table-column label="菜单ICON" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.icon }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="360" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.level == 1 && $PowerAdd(userPower, currentPagePower)">
                            <el-button type="success" size="mini" v-on:click="onAdd2(scope.row)">新增二级菜单</el-button>
                        </template>

                        <template v-if="$PowerEnable(userPower, currentPagePower)">
                            <el-button type="success" size="mini" plain v-if="scope.row.enableState == 1"
                                v-on:click="onEnable(scope.row)">启用
                            </el-button>
                            <el-button type="info" size="mini" plain v-else v-on:click="onEnable(scope.row)">禁用
                            </el-button>
                        </template>

                        <el-button type="primary" size="mini"
                            v-if="$PowerUpdate(userPower, currentPagePower)" plain
                            v-on:click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" v-if="$PowerDelete(userPower, currentPagePower)"
                            plain v-on:click="onDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>



        <!--对话框-->
        <el-dialog :title="EditTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="35%">
            <div class="l-div-400">

                <el-form ref="form" :model="form" label-width="130px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单名称">
                                <el-input v-model="form.menuName" class="l-input-form" placeholder="菜单名称"></el-input>
                            </el-form-item>
                            <el-form-item label="菜单Code">
                                <el-input v-model="form.code" class="l-input-form" placeholder="菜单Code">
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="form.level == '2'" label="菜单链接">
                                <el-input v-model="form.linkUrl" class="l-input-form" placeholder="菜单链接">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input v-model="form.sort" class="l-input-form" placeholder="排序">
                                </el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>


                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSave">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>

import { GetMenuTreeList, SaveMenu, DeleteMenu, EnableMenu } from '@/service/systemapi';
import commom from '@/untils/common';
export default {
    data() {
        return {
            userPower: '',
            currentPagePower:"-1",
            reflushPageFlag: true,
            //分页 结束
            isAdd: true,
            list: [],
            dialogVisible: false,
            EditTitle: "",
            form: {
                id: "",
                menuName: "",
                code: "",
                icon: "",
                linkUrl: "",
                parentId: "",
                level: "1",
                sort: 1

            },
        };
    },
    created() {
        this.currentPagePower=this.$route.query.powercode;
        this.userPower = localStorage.getItem("userPower");
        this.InitData();

    },
    watch: {},
    methods: {
        onChangeIcon(name){
            this.form.icon=name;
        },
        //初始化
        InitData() {
            if (this.$PowerSelect(this.userPower, this.currentPagePower)) {
                this.getList();
            }

        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;


            GetMenuTreeList().then(res => {

                if (res.data != undefined) {
                    that.list = res.data;

                    that.$nextTick(function () {
                        that.reflushPageFlag = true;
                    });
                }
                that.closeLoading();
            }).catch(err => {
                this.$message.error("数据请求异常");
                that.closeLoading();
            })

        },
        //初始化表单
        initForm() {
            this.form.id = "";
            this.form.menuName = "";
            this.form.code = "";
            this.form.icon = "";
            this.form.linkUrl = "";
            this.form.parentId = "";
            this.form.level = "1";
            this.form.sort = 1;


        },
        onAdd() {
            this.initForm();

            let listFirst = this.list.filter(item => { return item.level == 1 });

            if (listFirst != null && listFirst.length > 0) {
                let currentList = listFirst.sort(function (a, b) { return b.sort - a.sort; })[0];
                this.form.sort = currentList.sort + 1;
            }


            this.isAdd = true;
            this.dialogVisible = true;
            this.EditTitle = "新增";
        },
        onAdd2(firstRow) {
            this.initForm();

let menuFirst = this.list.filter(item => { return item.id == firstRow.id })[0];

let menuNodes = this.list.filter(item => { return item.parentId == firstRow.id });

if (menuNodes != null && menuNodes.length > 0) {
    let currentList = menuNodes.sort(function (a, b) { return b.sort - a.sort; })[0];
    this.form.sort = currentList.sort + 1;
}

this.form.parentId = firstRow.id;
this.form.level = "2";
this.EditTitle = `【${menuFirst.menuName}】 - 新增二级菜单`;
this.isAdd = true;
this.dialogVisible = true;

        },
        onEdit(row) {
            this.initForm();
            this.isAdd = false;
            this.dialogVisible = true;
            this.EditTitle = "修改";

            //赋值
            this.form.id = row.id;
            this.form.menuName = row.menuName;
            this.form.code = row.code;
            this.form.icon = row.icon;
            this.form.linkUrl = row.linkUrl;
            this.form.parentId = row.parentId;
            this.form.level = row.level;
            this.form.sort = row.sort;
        },
        onDelete(row) {
            var that = this;
            this.$confirm("是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                that.openLoading();
                DeleteMenu(row.id).then(res => {
                    that.closeLoading();
                    console.log(res);
                    if (res.success) {
                        that.getList();
                        that.$message({ message: "删除成功", type: "success" });
                    } else {
                        that.$message.error(res.msg);
                    }
                }).catch(err => {
                    that.$message.error("删除失败");
                    that.closeLoading();
                })

            });
        },
        onEnable(row) {
            var that = this;
            that.openLoading();
            EnableMenu(row.id).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: "操作成功", type: "success" });
                    that.getList();
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })

        },
        onSave() {
            var that = this;
            that.openLoading();

            SaveMenu(this.form).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: "操作成功", type: "success" });
                    that.getList();
                    that.dialogVisible = false;
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })

        },
        onSave2() {
            var that = this;
            that.openLoading();
            SaveMenu(this.form).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: "操作成功", type: "success" });
                    that.getList();
                    that.dialogVisible = false;
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })


        },

       
    },
};
</script>

<style scoped>
.menu-icon {
    width: 40px;
    height: 40px;
    margin: 5px;
    /* border: 1px solid red; */
    cursor: pointer;
}
.menu-icon-action{
    border: 1px solid red;
    border-radius: 5px;
    background-color: #8BA6C1;
}
.menu-icon2{
    width: 30px;
    height: 30px;
    margin: 5px;
    /* border: 1px solid red; */
    cursor: pointer;
    text-align: center;
}
.menu-icon2-action{
    border: 1px solid #8BA6C1;
    border-radius: 5px;
    background-color: #8BA6C1;
}
.l-gray {
    text-indent: 10px;
    color: #e14949;
    text-align: left;
}

.l-grren {
    text-indent: 10px;
    color: green;
    text-align: left;
}

.ql-editor {
    min-height: 300px;
}



.l-div-400 {
    height: 300px;
    overflow: auto;
    padding: 0px 15px;
}

.l-input {
    display: inline-block;
    width: 260px;
}

.l-input-form {
    display: inline-block;
    width: 320px;
}

.l-margin-l15 {
    margin-left: 15px;
}

/* 上传图片 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>